"use client";
import React, { useState } from "react";
import {
  DesktopOutlined,
  PieChartOutlined,
  UserOutlined,
} from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Layout, Menu, theme, Col, Row, Statistic } from "antd";
import CookieChart from "../components/CookieChart";
import ChartComponent from "../components/RankChart";
import SearchPage1 from "../pages/SearchPage1"; // ✅ 引入搜索页面

const { Header, Content, Footer, Sider } = Layout;

type MenuItem = Required<MenuProps>["items"][number];

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[]
): MenuItem {
  return { key, icon, children, label } as MenuItem;
}

const items: MenuItem[] = [
  getItem("主页", "1", <PieChartOutlined />),
  getItem("数据搜索-1", "2", <DesktopOutlined />),
  getItem("数据搜索-2", "sub1", <UserOutlined />, [
    getItem("Tom", "3"),
    getItem("Bill", "4"),
    getItem("Alex", "5"),
  ]),
];

const Sidebar: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const [selectedKey, setSelectedKey] = useState("1"); // ✅ 维护选中的页面
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  const renderContent = () => {
    switch (selectedKey) {
      case "1":
        return (
          <div>
            <div style={{ display: "flex" }}>
              <div
                style={{
                  padding: 24,
                  minHeight: 240,
                  background: colorBgContainer,
                  borderRadius: borderRadiusLG,
                  flex: 1,
                  marginRight: 16,
                  marginTop: 16,
                }}
              >
                <Row gutter={20}>
                  <Col span={12}>
                    <Statistic title="昨日解析数" value={"${today_search}次"} />
                  </Col>
                  <Col span={12}>
                    <Statistic title="昨日活跃IP数" value={"${yesterday_search}次"} precision={2} />
                  </Col>
                </Row>
              </div>
              <div
                id="cookie"
                style={{
                  padding: 24,
                  minHeight: 240,
                  background: colorBgContainer,
                  borderRadius: borderRadiusLG,
                  flex: 1,
                  marginTop: 16,
                }}
              >
                <CookieChart />
              </div>

            </div>

            <div style={{ display: "flex" }}>
            <div
              id="cookie"
              style={{
                padding: 24,
                minHeight: 240,
                background: colorBgContainer,
                borderRadius: borderRadiusLG,
                flex: 1,
                marginTop: 16,
                marginRight: 16,
              }}
            >
              <ChartComponent/>
            </div>

            <div
              id="cookie"
              style={{
                padding: 24,
                minHeight: 240,
                background: colorBgContainer,
                borderRadius: borderRadiusLG,
                flex: 1,
                marginTop: 16,
              
              }}
            >
              Under construction
            </div>
            </div>
          </div>
          
          
        );
      case "2":
        return <SearchPage1 />;
      default:
        return <div style={{ padding: 24 }}>Under construction</div>;
    }
  };

  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div className="menu-vertical" />
        <Menu
          theme="dark"
          defaultSelectedKeys={["1"]}
          mode="inline"
          items={items}
          onClick={(e) => setSelectedKey(e.key)} // ✅ 监听点击事件
        />
      </Sider>

      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }} />
        <Content style={{ margin: "0 16px" }}>{renderContent()}</Content>
        <Footer style={{ textAlign: "center" }}>DNSMON ©{new Date().getFullYear()} Created by Qingxin Gui</Footer>
      </Layout>
    </Layout>
  );
};

export default Sidebar;
